<template>
    <div class="page-bg">
        <div class="title df ai-c">
            <div class="main fs-16">确认订单</div>
        </div>
        <div class="cont main mt-20">
            <el-table class="table" :data="table" header-cell-class-name="table-header">
                <el-table-column label="应用类别">
                    <template #default="">
                        <div class="df">
                            <img :src="data.goods_logo" alt="" class="img mr-10" />
                            <div>
                                <div>{{data.product_title}}</div>
                                <!-- <div class="fs-12 c-99">授权</div> -->
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="购买详情">
                    <template #default="">{{data.product_title}}</template>
                </el-table-column>
                <el-table-column label="单价">
                    <template #default="">{{data.unit_price}}</template>
                </el-table-column>
                <el-table-column label="小计">
                    <template #default="">{{data.amount}}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="cont main bordertop">
            <div class="pd-20 c-red" style="background:#ffede7;">
                <div class="df">
                    <div class="df-s0">开票说明：</div>
                    <div>
                        <div>1.系统默认开具普通发票，可完善专用发票信息后自主修改。</div>
                        <div>2.用户下单时系统将默认开发票，请确认已完善发票和地址信息，否则需自主联系开发者索取发票</div>
                    </div>
                </div>
                <div class="df">
                    <div class="df-s0">卡券说明：</div>
                    <div>订单使用卡券后，请及时付款，如订单关闭卡券退回“我的卡券”，如订单发生退款卡券将失效，如需使用需重新领取。</div>
                </div>
                <div class="df">
                    <div class="df-s0">优惠码说明：</div>
                    <div>订单使用优惠码后，请及时付款，如订单关闭优惠码退回，如订单发生退款优惠码将失效，如需使用需重新领取。</div>
                </div>
            </div>
            <div class="mt-20 pd-20 df ai-c jc-b" style="background:#f7f9ff;">
                <div class="df ai-c">
                    <el-checkbox v-model="checked" label="允许开发者联系我" size="large" />
                    <el-popover placement="bottom-start" :width="200" trigger="hover" content="联系电话/QQ开发者可见">
                        <template #reference>
                            <el-icon color="#428bca" class="ml-6"><QuestionFilled /></el-icon>
                        </template>
                    </el-popover>
                </div>
                <div class="df ai-c">
                    <div class="c-blue fs-16">实付总金额: </div>
                    <div class="b fs-16 c-red">￥{{data.total}}</div>
                    <el-button class="ml-20" type="primary" @click="confim">提交订单</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import myAxios from "@/utils/index";

export default {
    data(){
        return {
            id: '',
            table:[{
                username: "username",
            }],
            checked: false,
            data: {},
        }
    },
    created(){
        this.id = this.$route.query.id;
        this.getData();
    },
    methods:{
        getData(){0
            myAxios.get("/ddd-order/order/confirm/view?order_id="+this.id).then(res=>{
                if(!res?.data){return}
                this.data = res.data;
            })
        },
        confim(){
            myAxios.post("/ddd-order/share/command/confirm",{data:{order_ids:[this.id]}}).then(res=>{
                if(!res?.data){return}
                this.checkout();
            });
        },
        checkout(){
            myAxios.post("/ddd-order/share/command/check_out",{
                data:{order_ids:[this.id]}
            }).then(res=>{
                if(!res?.data){return}
                this.pay(res.data.payment_id);
            });
        },
        pay(ticket){
            this.$router.push("/payment?ticket="+ticket);
        }
    }
}
</script>

<style scoped>
.title{height:60px; background:#ffffff;}
.table .img{width:50px; height:50px;}
.main{width:1200px; margin-left:auto; margin-right:auto;}
.table-header{background:#f4f5f9!important;}
.cont{background:#ffffff; padding:20px; box-sizing:border-box;}
.pd-12{padding:12px 20px;}
.pd-20{padding:20px;}
.bordertop{border-top:1px solid #ccc;}
.input{box-sizing:content-box!important; height:20px; width:200px; line-height:20px; padding:6px 8px; border:1px solid #d9d9d9; background-color:#f9f9f9; font-size:14px; outline:none; color:#4c4151;;}
</style>
